<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/css1.css">
</head>
<body>
    <!-- 页面头部 -->
    <header>
        <div class="def">
            <div class="logo">
                <span>Career Builder</span>
            </div>
            <nav>
                <ul>
                    <li><a href="">HOME</a></li>
                    <li><a href="">ABOUT</a></li>
                    <li><a href="">GALLERY</a></li>
                    <li><a href="">FACULTY</a></li>
                    <li><a href="">EVENTS</a></li>
                    <li><a href="">CONTACT</a></li>
                </ul>
            </nav>
        </div>  
    </header>

    <!-- 页面Banner区域 -->
    <div class="banner">  
        <div class="pic"><img src="image/banner3.jpg" alt=""></div>
        <div class="mask_layer"></div>
        <div class="form">
            <form action="" method="">
                <input type="text" placeholder="your Name">
                <input type="tel" placeholder="your Phone">
                <input type="email" placeholder="your Email">
                <textarea  placeholder="Write Your Comment Here"></textarea>
                <input type="submit" value="SEND MESSAGE"></button>
                    
            </form>
        </div>

    </div>

    <!-- 页面ABOUT区域 -->
    <div class="about">  
        <div class="box1">
            <h2>ABOUT</h2>
            <div class="line"></div>
            <p> Lorem Ipsum is simply dummy text of the printing and typesetting</p>
            <p>industry. Lorem Ipsum has been the industry's standard dummy</p> 
            <p>text ever since the 1500s.</p>
        </div>

        <div class="box2">
            <div class="boxleft">
                <h2>A WORD</h2>
                <h2>ABOUT US</h2>
        
            </div>

            <div class="boxmiddle">
                <img src="image/bb3.jpg" alt="">
            </div>

            <div class="boxright">
                <ul>
                    <li>
                        <p class="p1">70000</p>
                        <div class="line"></div>
                        <p class="p2">Students</p>
                    </li>
                    <li>
                        <p class="p1">600</p>
                        <div class="line"></div>
                        <p class="p2">Facutly</p>
                    </li>
                </ul>
            </div > 
        </div>

        <div class="box3">
            <p class="p3">
                Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nisl et felis gravida commodo? Suspendisse eget ullamcorper ipsum. Suspendisse diam amet.
            </p>
            <p class="p4">EXPLORE</p>
        </div>
    </div>

    <!-- 页面图文混排区域 -->
    <div class="words-and-picturs">
        <ul>
            <li>
                <img src="image/b1.jpg" alt="">
            </li>
            <li class="words">
                <h4>Library</h4>
                <p class="p2">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                <p class="p3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                <p class="p4">EXPLORE</p>
                <div class="sanjiao1"></div>
            </li>
            <li>
                <img src="image/b2.jpg" alt="">
            </li>
            <li class="words">
                <h4>Computer Lab</h4>
                <p class="p2">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                <p class="p3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                <p class="p4">EXPLORE</p>
                <div class="sanjiao1"></div>
            </li>
            <li class="words">
                <h4>Conference Hal</h4>
                <p class="p2">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                <p class="p3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                <p class="p4">EXPLORE</p>
                <div class="sanjiao2"></div>
            </li>
            <li>
                <img src="image/b3.jpg" alt="">
            </li>
            <li class="words">
                <h4>Play Ground</h4>
                <p class="p2">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                <p class="p3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                <p class="p4">EXPLORE</p>
                <div class="sanjiao2"></div>
            </li>
            <li>
                <img src="image/b4.jpg" alt="">
            </li>
            
        </ul>
      
    </div>

    <!-- 页面Gallery区域 -->
    <div class="gallery">
        <div class="box1">
            <h2>GALLERY</h2>
            <div class="line"></div>
            <p> Lorem Ipsum is simply dummy text of the printing and typesetting</p>
            <p>industry. Lorem Ipsum has been the industry's standard dummy</p> 
            <p>text ever since the 1500s.</p>
        </div>

        <div class="box2">
            <dl>
                <dt><img src="image/03-01.jpg" alt=""></dt>
                <dd>Science Lab</dd>
            </dl>
            <dl>
                <dt><img src="image/03-02.jpg" alt=""></dt>
                <dd>Indoor Stadium</dd>
            </dl>
            <dl>
                <dt><img src="image/03-03.jpg" alt=""></dt>
                <dd>Transportation</dd>
            </dl>
            <dl>
                <dt><img src="image/03-04.jpg" alt=""></dt>
                <dd>Kids Room</dd>
            </dl>
            <dl>
                <dt><img src="image/03-05.jpg" alt=""></dt>
                <dd>Meditation Classes</dd>
            </dl>
            <dl>
                <dt><img src="image/03-06.jpg" alt=""></dt>
                <dd>Kids Play Ground</dd>
            </dl>
        </div>
        
    </div>

    <!-- 页脚 -->
    <div class="footer">
        <p>&copy;2016 imooc.com 京ICP备13046642号</p>
    </div>
</body>
</html>